<template>
	<view class="shop">
		<view class="shop-item">
			<view class="big-img">
				<image class="big-img" src="../../static/img/Furnishing.jpg" mode=""></image>
			</view>
			<scroll-view :scroll-x="true" class="small-item">
				<CommodityVue :commodityData="shopData" item-w="200" item-h="200" wrap='nowrap' titleFont='20'>
				</CommodityVue>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import CommodityVue from '../common/Commodity.vue';
	export default {
		components: {
			CommodityVue
		},
		data() {
			return {
				shopData: [{
					id: 1,
					src: '../../static/img/hot1.jpg',
					contentTitle: '需衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}, {
					id: 2,
					src: '../../static/img/hot2.jpg',
					contentTitle: '大衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}, {
					id: 3,
					src: '../../static/img/hot3.jpg',
					contentTitle: '大衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}, {
					id: 4,
					src: '../../static/img/commodity1.jpg',
					contentTitle: '需衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}, {
					id: 5,
					src: '../../static/img/commodity2.jpg',
					contentTitle: '大衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}, {
					id: 6,
					src: '../../static/img/commodity3.jpg',
					contentTitle: '大衣绒毛大款2024年必须买，爆款促销，手慢则无，快！快！快！',
					pprice: 299,
					oprice: 659,
					discount: 5.2
				}]
			}
		}
	}
</script>

<style scoped lang="scss">
	.shop {
		width: 100%;

		.shop-item {
			margin: 8rpx 0;

			.big-img {
				width: 100%;
				height: 350rpx;
			}

			.small-item {
				display: flex;
				flex-wrap: nowrap;
			}
		}
	}
</style>